<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                height: 100vh;
                margin: 0 8px;
                display: flex;
                flex-flow: column;
            }
            header {
                text-align: center;
                line-height: 3em;
                background-color: antiquewhite;
            }

            main {
                display: flex;
                flex: 1;
            }

            .left-side,
            .right-side {
                width: 200px;
                background-color: aqua;
                text-align: center;
            }

            .left-side {
                order: -1;
            }

            .middle {
                flex: 1;
            }

            footer {
                text-align: center;
                line-height: 3em;
                background-color: gray;
            }

        </style>
    </head>
    <body>
        <header>头部</header>
        <main>
            <div class="middle">中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分</div>
            <div class="left-side">左边部分</div>
            <div class="right-side">右边部分</div>
        </main>
        <footer>底部</footer>
    </body>
</html>